<!--
 * @LastEditTime: 2021-11-17 17:49:30
 * @Description:
-->
<template>
  <el-card class="app-container">
    <div>
      <div class="mb10">
        <form-selections :is-active="isActive" :items="formItems" :query-param.sync="queryParam" display="block" @handleSearch="handleSearch">
          <el-button size="mini" type="primary" class="filter-item search" icon="el-icon-search" @click="handleSearch">
            搜索
          </el-button>
          <el-button size="mini" class="filter-item" icon="el-icon-refresh" @click="handleRefresh">
            刷新
          </el-button>
        </form-selections>
      </div>
      <div v-loading="loading">
        <el-table :data="data" style="width: 100%;margin-bottom: 20px;" row-key="id" border default-expand-all :tree-props="{children: 'children', hasChildren: 'hasChildren'}" :max-height="screenHeigh">
          <el-table-column align="center" type="index" label="序号" width="55" />
          <el-table-column align="center" prop="order_no" label="订单编号" />
          <el-table-column align="center" prop="order_no2" label="订单编号2" />
          <el-table-column align="center" prop="platform_name" label="平台" />
          <el-table-column align="center" prop="shop_name" label="店铺名称" />
          <el-table-column align="center" prop="is_sync_order" label="是否同步">
            <template slot-scope="scope">
              <!-- {{ scope.row.is_sync_order === 1? '已同步': '未同步' }} -->
              {{ syncOrderData[scope.row.is_sync_order] }}
            </template>
          </el-table-column>
          <el-table-column align="center" prop="updated_at" label="更新时间" />
          <el-table-column align="center" prop="created_at" label="创建时间" />
          <el-table-column align="center" label="操作" width="250px">
            <template slot-scope="scope">
              <el-button size="mini" type="primary" @click="seeInfo(scope.row.id)">查看JSON详情</el-button>
              <span v-if="scope.row.is_sync_order!==0 && scope.row.platform_id !==3" style="margin:0 5px">
                <el-button v-action="'ordersTemp@manualSplitOrder'" size="mini" type="primary" @click="manualSplitOrder(scope.row.id)">手工拆单</el-button>
              </span>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination v-if="paginate.total > 0" class="pagination_box" background :current-page="paginate.current" :page-sizes="[50, 100, 200, 500]" layout="total, sizes, prev, pager, next, jumper" :total="paginate.total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
      </div>
      <el-dialog title="订单详情" center :visible.sync="formVisible" width="50%" @close="formVisible=false">
        <div v-loading="formVisibleLoading">
          <el-form :ref="formName" :model="formFieldsData">
            <!-- <el-form-item label="选择物流公司：" :label-width="formLabelWidth" prop="type">
            <el-select v-model="formFieldsData.type" placeholder="选择物流公司">
              <el-option v-for="item in companyOption" :key="item.id" :label="item.name" :value="item" />
            </el-select>
          </el-form-item> -->
            <el-form-item label="返货订单数据">
              <div>
                <pre width="200">{{ order_info }}</pre>
              </div>
            </el-form-item>
          </el-form>
        </div>

        <div slot="footer" class="dialog-footer">
          <el-button @click="formVisible=false">取 消</el-button>
        </div>
      </el-dialog>
    </div>
  </el-card>
</template>
<script>
import formOperate from '@/layout/mixin/formOperate'
import cacheList from '@/layout/mixin/cacheList'
import { action } from '@/directive/permission/index.js'
export default {
  name: 'OrderGetRecords',
  directives: {
    action
  },
  mixins: [formOperate, cacheList],
  data() {
    return {
      syncOrderData: {
        0: '未同步',
        1: '已同步',
        2: '同步异常'
      },
      otherHeight: 345,
      componentName: 'ordersTemp',
      formName: 'ordersTemp',
      formLabelWidth: '90px',
      // 刷新路由
      refreshRoute: true,
      queryParam: {
        start_at: '',
        end_at: '',
        limit: 50,
        platform_name: '',
        shop_id: '',
        is_sync_order: '',
        order_no: ''
      },
      url: 'ordersTemp',
      searchShop: 1,
      lableName: 'id',
      formItems: [
        {
          label: '订单编号',
          key: 'order_no',
          type: 'input',
          placeholder: '请输入订单编号'
        },
        {
          label: '订单编号2',
          key: 'order_no2',
          type: 'input',
          placeholder: '请输入订单编号2'
        },
        {
          label: '平台名称',
          key: 'platform_name',
          type: 'input',
          placeholder: '请输入平台名称'
        },
        {
          label: '店铺',
          key: 'shop_id',
          type: 'select',
          multiple: false,
          filterable: true,
          placeholder: '请选择店铺',
          options: []
        },
        {
          label: '是否同步',
          key: 'is_sync_order',
          type: 'select',
          multiple: false,
          filterable: false,
          placeholder: '请选择是否同步',
          options: [
            {
              label: '未同步',
              value: '0'
            },
            {
              label: '已同步',
              value: '1'
            },
            {
              label: '同步异常',
              value: '2'
            }
          ]
        }
        // {
        //   label: '拉取时间',
        //   key: 'date',
        //   type: '',
        //   valueFormat: 'yyyy-MM-dd HH:mm:ss',
        //   placeholder: '请选择时间范围'
        // }
      ],
      formFieldsData: {},
      formVisibleLoading: false,
      order_info: {}
    }
  },
  methods: {
    manualSplitOrder(id) {
      this.$confirm('确认要重新手工拆单？拆单后将删除之前订单？', '重新手工拆单', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$http.post(`ordersTemp/manualSplitOrder/${id}`).then((res) => {
          if (res.code === 10000) {
            this.$message.success(res.message)
            this.handleSearch()
          } else {
            this.$message(res.message)
          }
        }).catch(() => {

        })
      }).catch(() => { })
    },
    seeInfo(id) {
      console.log(id)
      this.formVisible = true
      this.formVisibleLoading = true

      this.$http.get(`ordersTemp/${id}`)
        .then(res => {
          this.formFieldsData = res.data
          this.order_info = JSON.stringify(res.data.order_info, null, 4)
          this.formVisibleLoading = false
        })
        .catch(() => {
          this.formVisibleLoading = false
        })
    }
  }
}
</script>
<style scoped>
pre {
  white-space: pre-wrap;
  white-space: -moz-pre-wrap;
  white-space: -pre-wrap;
  white-space: -o-pre-wrap;
  word-wrap: break-word;
}
</style>
